<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="msg = '你好'">修改msg的值</button>

        <!-- 获得输入的内容 -->
        <input type="text" v-model="msg">
        <p>{{ msg }}</p>

        <!-- 下拉框获得选中的value值 -->
        <select v-model="fruit">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
        </select>

        <!-- 要么选中，要么不选中 -->
        <!-- 得到true或false -->
        <input type="checkbox" v-model="chk">
    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '',
                fruit: '',
                chk: true
            }
        })
    </script>
</body>
</html>